<style type="text/css">
  .page-header .left {
    width: calc(100% - 220px);
  }

  @media only screen and (max-width: 479px) and (min-width: 320px) {
    .page-header .left {
      width: 100%;
    }
  }
</style>
<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs [items]="['供应链管理', '品质管理', 'PCBA烧录测试报表']" icon="fa fa-cogs"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>PCBA烧录测试报表</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="selectDate">
                  <div class="top_module">
                    <span class="module_text">物料编码</span>
                    <input type="text" class="module_inp top_module_select ng-pristine ng-valid ng-touched"
                      placeholder="物料编码" [(ngModel)]='tableSearch.materialCode '>
                    <div class="s_del_icon" (click)='delKey("materialCode")'>x</div>
                  </div>

                  <div class="top_module">
                    <span class="module_text">产品名称</span>
                    <input type="text" class="module_inp top_module_select ng-pristine ng-valid ng-touched"
                      placeholder="产品名称" [(ngModel)]='tableSearch.productName '>
                    <div class="s_del_icon" (click)='delKey("productName")'>x</div>
                  </div>

                  <div class="top_module top_module_box" style="min-width: auto;">
                    <span class="top_module_label module_text">时间类型</span>
                    <select name="" class="top_module_select" [(ngModel)]="tableSearch.timeType"
                      style="min-width: 110px;">
                      <option value="1">检验日期</option>
                      <option value="2">创建日期</option>
                    </select>
                  </div>

                  <div class="selectDate top_module modify_border">
                    <!-- <span class="module_text">日期</span> -->
                    <table-select-date [notInit]='true' [minDay]='false' (outerTime)="getSelectTableTime($event)">
                    </table-select-date>
                  </div>
                  <button class="btn btn-primary" (click)="table_search()">查询</button>
                  <button class="btn btn-primary" type="button" (click)="exportData()">导出</button>
                  <button type="button" class="btn btn-primary" (click)="addRow()" *ngIf="isShowAdd">添加</button>
                </div>

              </div>
            </div>
            <div class="table_scroll">
              <table class="
                  display
                  dataTables
                  responsive
                  table table-striped table-bordered table-hover
                  dataTable
                  s_h5_table
                ">
                <thead>
                  <tr>
                    <th>检验日期</th>
                    <th>订单号</th>
                    <th>物料编码</th>
                    <th>产品名称</th>
                    <!-- <th>产品型号</th> -->
                    <th>订单数量</th>
                    <th>检测数量</th>
                    <th>不良数量</th>
                    <th>不良率</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>更新人</th>
                    <th>更新时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{row.checkDate.substring(0,10)}}</td>
                    <td>{{ row.orderNumber }}</td>
                    <td>{{ row.materialCode }}</td>
                    <td>{{ row.productName }}</td>
                    <!-- <td>{{ row.productType }}</td> -->
                    <td>{{ row.orderNum }}</td>
                    <td>{{ row.checkNum }}</td>
                    <td>{{ row.badNum }} <button type="button" (click)="viewRow(row, viewCarModal, 2)"
                        *ngIf="row.badNum!=0">查看</button></td>
                    <td>{{ row.badRatio }}%</td>
                    <td>{{ row.createName }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>{{ row.updateName }}</td>
                    <td>{{ row.updateTime }}</td>
                    <td>
                      <button type="button" (click)="editRow(row)" *ngIf="isShowEdit">编辑</button>
                      <button type="button" (click)="deleteRow(row)" *ngIf="isShowDel">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator [totalRecords]="tabletotalCount" [rows]="pageSize" [currentPage]="curPage - 1"
                (onPageChange)="tablePaginate($event)"></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!-- 不良数量查看   弹窗-->
  <section bsModal #viewCarModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content" style="width: 700px;">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeViewCarModal(viewCarModal)" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{{typeName}}--查看</h4>
        </div>
        <div class="modal-body">
          <table
            class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
            <thead>
              <tr>
                <th>订单数量</th>
                <th>检测数量</th>
                <th>不良数量</th>
                <th>不良率</th>
              </tr>
            </thead>
            <tbody class="carBody">
              <tr>
                <td>{{viewDataObj.orderNum}}</td>
                <td>{{viewDataObj.checkNum}}</td>
                <td>{{viewDataObj.badNum}}</td>
                <td>{{viewDataObj.badRatio}}%</td>
              </tr>
            </tbody>
          </table>
          <div class="row form-horizontal table_scroll" *ngIf="viewDataObj.badInfoList.length != 0"
            style="max-height:400px">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
              <thead>
                <tr>
                  <th>不良原因</th>
                  <th>不良数量</th>
                </tr>
              </thead>
              <tbody class="carBody">
                <tr *ngFor="let row of viewDataObj.badInfoList; let i = index" [attr.data-index]="i">
                  <td>{{row.name}}</td>
                  <td>{{row.count}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 不良数量查看 弹窗end-->
</div>